/* 预览 */
.font-size20{
    font-size:20px !important;
}
.bg-grayer{
    background-color:#666;
}
.preview-header {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9001;
    -webkit-transition: top .1s;
    -moz-transition: top .1s;
    -ms-transition: top .1s;
    transition: top .1s;
    background-color: #212d36;
    -webkit-box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
    -moz-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 4px 0 rgb(0 0 0 / 30%);
    /* display: none; */
}

.preview-logo {
    height: 50px;
    text-align: center;
    line-height: 50px;
}

.preview-logo img {
    float: left;
    position: relative;
    display: block;
    max-width: 100%;
    width: 100px;
    margin: 0 auto;
    top: 50%;
    margin-top: -15.5px;
    flex-shrink: 0;
}

.preview-logo .dropmenue {
    float: left;
    margin-left: 15px;
    flex-shrink: 0;
}

.preview-logo .btn {
    display: block;
    height: 50px;
    line-height: 50px;
    width: 150px;
    text-align: center;
    padding: 0 20px;
    font-size: 14px;
    border: none;
    background-color: #303d47;
}

.preview-media li {
    float: left;
    position:relative;
    height: 50px;
    line-height: 50px;
    background-color: #09131a;
    cursor: pointer;
}
.preview-media li a{
    display: block;
    width: 60px;
    height: 48px;
    line-height: 48px;
    text-align: center;
    color: #fff;
    border-left: 1px solid #444d54;
    background-color: #212d36;
}
.preview-media a.inactive {
    position: absolute;
    bottom: -48px;
    left: -1px;
    width: 60px;
    display: none;
}
.preview-media li:hover a.inactive  {display: block;}
.preview-media i,
.preview-close i {
    color: #fff;
    font-size: 24px;
    vertical-align: middle;
    cursor: pointer;
}
.preview-media a:hover, .preview-media a.active {
    color: #007bff;
    background-color: #09131a;
}
.preview-media a:hover i ,.preview-media a.active i{
    color: #007bff;
}

.preview-close .btn {
    height: 50px;
    line-height: 50px;
    padding: 0 20px;
    font-size: 14px;
    background-color: #007bff;
    color: #fff;
}

/*iframe的样式*/
#iframe-container{
    position:relative;
    top:50px;
    webkit-transition: all .1s;
    -moz-transition: all .1s;
    -ms-transition: all .1s;
    transition: all .1s;
    height:calc(100% - 50px);
}
#iframe-container .inner {
    width: 100%;
    height: 100%;
    position: relative;
}
#iframe-container  iframe{
     display: block;
     overflow-x: hidden;
 }
#iframe-container.desktop{
    width:calc(100% + 17px);
    overflow-x:hidden;
}
#iframe-container.ipad-portrait {
    width: 964px !important;
    height: 1335px !important;
    padding: 174px 92px 137px 104px;
    margin-bottom: 60px;
    background: url(../../../static/commons/img/ipad.png) no-repeat;
}
#iframe-container.ipad-landscape {
    width: 1336px !important;
    height: 964px !important;
    padding: 92px 137px 104px 174px;
    margin:0 auto 40px;
    background: url(../../../static/commons/img/ipad-landscape.png) no-repeat;
}
#iframe-container.iphone-portrait {
    width: 398px !important;
    height: 815px !important;
    padding: 127px 40px 120px 34px;
    margin: 0 auto 60px;
    background: url(../../../static/commons/img/iphone.png) no-repeat;
}
#iframe-container.iphone-landscape {
    width: 815px !important;
    height: 394px !important;
    padding: 40px 120px 34px 127px;
    margin-bottom: 60px;
    background: url(../../../static/commons/img/iphone-landscape.png) no-repeat;
}